<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="客户姓名" prop="loaderName">
        <el-input
          v-model="queryParams.loaderName"
          placeholder="请输入客户姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="更新人" prop="updateBy">
        <el-input
          v-model="queryParams.updateBy"
          placeholder="请输入更新人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-search" size="mini"
          >查看</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="customerhisList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column
        label="客户姓名"
        align="center"
        prop="loaderName"
        fixed="left"
      />
      <el-table-column
        label="联系方式"
        align="center"
        prop="loaderContactInformation"
      />
      <el-table-column label="身份证号" align="center" prop="loaderIdNumber" />
      <el-table-column label="家庭住址" align="center" prop="loaderAddress" />
      <el-table-column label="出身年月" align="center" prop="loaderAge" />
      <el-table-column label="出身年月" align="center" prop="loaderChildAge" />
      <el-table-column label="是否公司" align="center" prop="loaderCompany" />
      <el-table-column
        label="公司名称"
        align="center"
        prop="loaderCompanyName"
      />
      <el-table-column label="打卡工资" align="center" prop="loaderSalary" />
      <el-table-column label="公积金" align="center" prop="loaderHouseFund" />
      <el-table-column
        label="房产地址"
        align="center"
        prop="loaderPropertyAddress"
      />
      <el-table-column
        label="房产面积"
        align="center"
        prop="loaderPropertyAddressArea"
      />
      <el-table-column
        label="竣工年月"
        align="center"
        prop="loaderPropertyCompletedYears"
      />
      <el-table-column
        label="评估价值"
        align="center"
        prop="loaderPropertyAssess"
      />
      <el-table-column
        label="是否贷款"
        align="center"
        prop="loaderPropertyIsLoad"
      />
      <el-table-column
        label="贷款金额"
        align="center"
        prop="loaderPropertyLoadAmount"
      />
      <el-table-column
        label="贷款银行"
        align="center"
        prop="loaderPropertyLoadBank"
      />
      <el-table-column label="负债" align="center" prop="loaderDebt" />
      <el-table-column
        label="有无保险"
        align="center"
        prop="loaderIsInsurance"
      />
      <el-table-column label="有无车辆" align="center" prop="loaderIsCar" />
      <el-table-column
        label="有无信贷"
        align="center"
        prop="loaderIsCreditLoad"
      />
      <el-table-column
        label="有无房贷"
        align="center"
        prop="loaderIsHouseLoad"
      />
      <el-table-column
        label="有无信卡"
        align="center"
        prop="loaderIsCreditCard"
      />
      <el-table-column
        label="房贷类型"
        align="center"
        prop="loaderHouseLoadType"
      />
      <el-table-column
        label="房贷金额"
        align="center"
        prop="loaderHouseLoadAmount"
      />
      <el-table-column
        label="房贷银行"
        align="center"
        prop="loaderHouseLoadBank"
      />
      <el-table-column
        label="房贷月供"
        align="center"
        prop="loaderHouseLoadMouthPay"
      />
      <el-table-column
        label="信贷金额"
        align="center"
        prop="loaderCreditLoadAmount"
      />
      <el-table-column
        label="信贷银行"
        align="center"
        prop="loaderCreditLoadBank"
      />
      <el-table-column
        label="信贷月供"
        align="center"
        prop="loaderCreditLoadMonthPay"
      />
      <el-table-column
        label="车贷金额"
        align="center"
        prop="loaderCarLoadAmount"
      />
      <el-table-column
        label="车贷银行"
        align="center"
        prop="loaderCarLoadBank"
      />
      <el-table-column
        label="车贷月供"
        align="center"
        prop="loaderCarLoadMonthPay"
      />
      <el-table-column
        label="信卡额度"
        align="center"
        prop="loaderCreditCardLoadLimit"
      />
      <el-table-column
        label="信卡银行"
        align="center"
        prop="loaderCreditCardBank"
      />
      <el-table-column
        label="信卡用额"
        align="center"
        prop="loaderCreditCardUsed"
      />
      <el-table-column label="备注" align="center" prop="loaderRemark" />
      <el-table-column label="跟进记录" align="center" prop="loadFollow" />
      <el-table-column label="客户收佣" align="center" prop="loadCommission" />
      <el-table-column label="提醒日期" align="center" prop="loadReminderTime">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.loadRepayRecall != '1' &&
              compareDate(scope.row.loadReminderTime) < 0
            "
          >
            <el-tag type="danger">
              超期{{ -compareDate(scope.row.loadReminderTime) }}天
            </el-tag></span
          >

          <span
            v-if="
              scope.row.loadRepayRecall != '1' &&
              compareDate(scope.row.loadReminderTime) >= 0
            "
          >
            <el-tag>
              剩余{{ compareDate(scope.row.loadReminderTime) }}天
            </el-tag></span
          >

          <span>
            <el-tag v-if="scope.row.loadRepayRecall == '1'" type="success"
              >已还</el-tag
            >
          </span>
        </template>
      </el-table-column>
      <el-table-column label="客户经理" align="center" prop="loadBelongPerson" />
      <el-table-column
        label="归属部门"
        align="center"
        key="deptName"
        prop="dept.deptName"
      />
      <el-table-column label="贷款类型" align="center" prop="loadType">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.crm_load_type"
            :value="scope.row.loadType"
          />
        </template>
      </el-table-column>
      <el-table-column label="贷款进度" align="center" prop="loadProgress">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.crm_load_progress"
            :value="scope.row.loadProgress"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="还款提醒"
        align="center"
        prop="loadProgressRecall"
      />
      <el-table-column label="贷款收佣" align="center" prop="loadReceive" />
      <el-table-column label="贷款来源" align="center" prop="loadSource" />
      <el-table-column label="贷款金额" align="center" prop="loadAmount" />
      <el-table-column label="贷款年限" align="center" prop="loadLife" />
      <el-table-column label="还款方式" align="center" prop="loadRepayWay" />
      <el-table-column label="贷款月供" align="center" prop="loadMonthPay" />
      <el-table-column label="放款银行" align="center" prop="bank.bankName">
      </el-table-column>
      <el-table-column label="起始日期" align="center" prop="loadStartDay" />
      <el-table-column label="还款日期" align="center" prop="loadRepayDay" />
      <el-table-column label="是否还款" align="center" prop="loadRepayRecall">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.crm_load_repay_recall"
            :value="scope.row.loadRepayRecall"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="loadRemark" />
      <el-table-column label="配偶姓名" align="center" prop="wifeName" />
      <el-table-column
        label="联系方式"
        align="center"
        prop="wifeContactInformation"
      />
      <el-table-column label="身份证号" align="center" prop="wifeIdNumber" />
      <el-table-column label="家庭住址" align="center" prop="wifeAddress" />
      <el-table-column label="出身年月" align="center" prop="wifeAge" />
      <el-table-column label="出身年月" align="center" prop="wifeChildAge" />
      <el-table-column label="是否公司" align="center" prop="wifeCompany" />
      <el-table-column label="公司名称" align="center" prop="wifeCompanyName" />
      <el-table-column label="打卡工资" align="center" prop="wifeSalary" />
      <el-table-column label="公积金" align="center" prop="wifeHouseFund" />
      <el-table-column
        label="房产地址"
        align="center"
        prop="wifePropertyAddress"
      />
      <el-table-column
        label="房产面积"
        align="center"
        prop="wifePropertyAddressArea"
      />
      <el-table-column
        label="竣工年月"
        align="center"
        prop="wifePropertyCompletedYears"
      />
      <el-table-column
        label="评估价值"
        align="center"
        prop="wifePropertyAssess"
      />
      <el-table-column
        label="是否贷款"
        align="center"
        prop="wifePropertyIsLoad"
      />
      <el-table-column
        label="贷款金额"
        align="center"
        prop="wifePropertyLoadAmount"
      />
      <el-table-column
        label="贷款银行"
        align="center"
        prop="wifePropertyLoadBank"
      />
      <el-table-column label="负债" align="center" prop="wifeDebt" />
      <el-table-column label="有无保险" align="center" prop="wifeIsInsurance" />
      <el-table-column label="有无车辆" align="center" prop="wifeIsCar" />
      <el-table-column
        label="有无信贷"
        align="center"
        prop="wifeIsCreditLoad"
      />
      <el-table-column label="有无房贷" align="center" prop="wifeIsHouseLoad" />
      <el-table-column
        label="有无信卡"
        align="center"
        prop="wifeIsCreditCard"
      />
      <el-table-column
        label="房贷类型"
        align="center"
        prop="wifeHouseLoadType"
      />
      <el-table-column
        label="房贷金额"
        align="center"
        prop="wifeHouseLoadAmount"
      />
      <el-table-column
        label="房贷银行"
        align="center"
        prop="wifeHouseLoadBank"
      />
      <el-table-column
        label="房贷月供"
        align="center"
        prop="wifeHouseLoadMouthPay"
      />
      <el-table-column
        label="信贷金额"
        align="center"
        prop="wifeCreditLoadAmount"
      />
      <el-table-column
        label="信贷银行"
        align="center"
        prop="wifeCreditLoadBank"
      />
      <el-table-column
        label="信贷月供"
        align="center"
        prop="wifeCreditLoadMonthPay"
      />
      <el-table-column
        label="车贷金额"
        align="center"
        prop="wifeCarLoadAmount"
      />
      <el-table-column label="车贷银行" align="center" prop="wifeCarLoadBank" />
      <el-table-column
        label="车贷月供"
        align="center"
        prop="wifeCarLoadMonthPay"
      />
      <el-table-column
        label="信卡额度"
        align="center"
        prop="wifeCreditCardLoadLimit"
      />
      <el-table-column
        label="信卡银行"
        align="center"
        prop="wifeCreditCardBank"
      />
      <el-table-column
        label="信卡用额"
        align="center"
        prop="wifeCreditCardUsed"
      />
      <el-table-column label="备注" align="center" prop="wifeRemark" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        label="更新人"
        align="center"
        prop="updateBy"
        fixed="right"
      />
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateTime"
        fixed="right"
      />
      <el-table-column label="状态" align="center" prop="delFlag" fixed="right">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.crm_customer_del_flag"
            :value="scope.row.delFlag"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="120px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleCheck(scope.row)"
            >查看</el-button
          >

          <el-button
            size="mini"
            type="text"
            icon="el-icon-refresh-left"
            @click="handleRecover(scope.row)"
            >使用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        {{ form.loaderName }}
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCustomerhis,
  getCustomerhis,
  delCustomerhis,
  addCustomerhis,
  updateCustomerhis,
} from "@/api/crm/customerhis";

import {
  listCustomer,
  getCustomer,
  delCustomer,
  addCustomer,
  updateCustomer,
} from "@/api/crm/customer";

export default {
  name: "Customerhis",
  dicts: [
    "crm_load_type",
    "crm_load_progress",
    "crm_load_repay_way",
    "crm_load_repay_recall",
    "crm_load_bank",
    "crm_customer_del_flag",
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户信息历史表格数据
      customerhisList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        loaderName: null,
        loaderContactInformation: null,
        loaderIdNumber: null,
        loaderAddress: null,
        loaderAge: null,
        loaderChildAge: null,
        loaderCompany: null,
        loaderCompanyName: null,
        loaderSalary: null,
        loaderHouseFund: null,
        loaderPropertyAddress: null,
        loaderPropertyAddressArea: null,
        loaderPropertyCompletedYears: null,
        loaderPropertyAssess: null,
        loaderPropertyIsLoad: null,
        loaderPropertyLoadAmount: null,
        loaderPropertyLoadBank: null,
        loaderDebt: null,
        loaderIsInsurance: null,
        loaderIsCar: null,
        loaderIsCreditLoad: null,
        loaderIsHouseLoad: null,
        loaderIsCreditCard: null,
        loaderHouseLoadType: null,
        loaderHouseLoadAmount: null,
        loaderHouseLoadBank: null,
        loaderHouseLoadMouthPay: null,
        loaderCreditLoadAmount: null,
        loaderCreditLoadBank: null,
        loaderCreditLoadMonthPay: null,
        loaderCarLoadAmount: null,
        loaderCarLoadBank: null,
        loaderCarLoadMonthPay: null,
        loaderCreditCardLoadLimit: null,
        loaderCreditCardBank: null,
        loaderCreditCardUsed: null,
        loaderRemark: null,
        loadFollow: null,
        loadCommission: null,
        loadReminderTime: null,
        loadBelongPerson: null,
        loadBelongDepartment: null,
        loadType: null,
        loadProgress: null,
        loadProgressRecall: null,
        loadReceive: null,
        loadSource: null,
        loadAmount: null,
        loadLife: null,
        loadRepayWay: null,
        loadMonthPay: null,
        loadBank: null,
        loadStartDay: null,
        loadRepayDay: null,
        loadRepayRecall: null,
        loadRemark: null,
        wifeName: null,
        wifeContactInformation: null,
        wifeIdNumber: null,
        wifeAddress: null,
        wifeAge: null,
        wifeChildAge: null,
        wifeCompany: null,
        wifeCompanyName: null,
        wifeSalary: null,
        wifeHouseFund: null,
        wifePropertyAddress: null,
        wifePropertyAddressArea: null,
        wifePropertyCompletedYears: null,
        wifePropertyAssess: null,
        wifePropertyIsLoad: null,
        wifePropertyLoadAmount: null,
        wifePropertyLoadBank: null,
        wifeDebt: null,
        wifeIsInsurance: null,
        wifeIsCar: null,
        wifeIsCreditLoad: null,
        wifeIsHouseLoad: null,
        wifeIsCreditCard: null,
        wifeHouseLoadType: null,
        wifeHouseLoadAmount: null,
        wifeHouseLoadBank: null,
        wifeHouseLoadMouthPay: null,
        wifeCreditLoadAmount: null,
        wifeCreditLoadBank: null,
        wifeCreditLoadMonthPay: null,
        wifeCarLoadAmount: null,
        wifeCarLoadBank: null,
        wifeCarLoadMonthPay: null,
        wifeCreditCardLoadLimit: null,
        wifeCreditCardBank: null,
        wifeCreditCardUsed: null,
        wifeRemark: null,
        status: null,
        updateBy: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询客户信息历史列表 */
    getList() {
      this.loading = true;
      listCustomerhis(this.queryParams).then((response) => {
        this.customerhisList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        crmCustomerhisId: null,
        id: null,
        loaderName: null,
        loaderContactInformation: null,
        loaderIdNumber: null,
        loaderAddress: null,
        loaderAge: null,
        loaderChildAge: null,
        loaderCompany: null,
        loaderCompanyName: null,
        loaderSalary: null,
        loaderHouseFund: null,
        loaderPropertyAddress: null,
        loaderPropertyAddressArea: null,
        loaderPropertyCompletedYears: null,
        loaderPropertyAssess: null,
        loaderPropertyIsLoad: null,
        loaderPropertyLoadAmount: null,
        loaderPropertyLoadBank: null,
        loaderDebt: null,
        loaderIsInsurance: null,
        loaderIsCar: null,
        loaderIsCreditLoad: null,
        loaderIsHouseLoad: null,
        loaderIsCreditCard: null,
        loaderHouseLoadType: null,
        loaderHouseLoadAmount: null,
        loaderHouseLoadBank: null,
        loaderHouseLoadMouthPay: null,
        loaderCreditLoadAmount: null,
        loaderCreditLoadBank: null,
        loaderCreditLoadMonthPay: null,
        loaderCarLoadAmount: null,
        loaderCarLoadBank: null,
        loaderCarLoadMonthPay: null,
        loaderCreditCardLoadLimit: null,
        loaderCreditCardBank: null,
        loaderCreditCardUsed: null,
        loaderRemark: null,
        loadFollow: null,
        loadCommission: null,
        loadReminderTime: null,
        loadBelongPerson: null,
        loadBelongDepartment: null,
        loadType: null,
        loadProgress: null,
        loadProgressRecall: null,
        loadReceive: null,
        loadSource: null,
        loadAmount: null,
        loadLife: null,
        loadRepayWay: null,
        loadMonthPay: null,
        loadBank: null,
        loadStartDay: null,
        loadRepayDay: null,
        loadRepayRecall: null,
        loadRemark: null,
        wifeName: null,
        wifeContactInformation: null,
        wifeIdNumber: null,
        wifeAddress: null,
        wifeAge: null,
        wifeChildAge: null,
        wifeCompany: null,
        wifeCompanyName: null,
        wifeSalary: null,
        wifeHouseFund: null,
        wifePropertyAddress: null,
        wifePropertyAddressArea: null,
        wifePropertyCompletedYears: null,
        wifePropertyAssess: null,
        wifePropertyIsLoad: null,
        wifePropertyLoadAmount: null,
        wifePropertyLoadBank: null,
        wifeDebt: null,
        wifeIsInsurance: null,
        wifeIsCar: null,
        wifeIsCreditLoad: null,
        wifeIsHouseLoad: null,
        wifeIsCreditCard: null,
        wifeHouseLoadType: null,
        wifeHouseLoadAmount: null,
        wifeHouseLoadBank: null,
        wifeHouseLoadMouthPay: null,
        wifeCreditLoadAmount: null,
        wifeCreditLoadBank: null,
        wifeCreditLoadMonthPay: null,
        wifeCarLoadAmount: null,
        wifeCarLoadBank: null,
        wifeCarLoadMonthPay: null,
        wifeCreditCardLoadLimit: null,
        wifeCreditCardBank: null,
        wifeCreditCardUsed: null,
        wifeRemark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        status: null,
        delFlag: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.crmCustomerhisId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 查看按钮操作 */
    handleCheck(row) {
      this.reset();
      const crmCustomerhisId = row.crmCustomerhisId;
      getCustomerhis(crmCustomerhisId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "查看客户信息历史";
      });
    },
    handleRecover(row) {
      this.reset();
      const crmCustomerhisId = row.crmCustomerhisId;

      getCustomerhis(crmCustomerhisId).then((response) => {
        this.form = response.data;
        if (this.form.id != null) {
          console.log(this.form);
          updateCustomer(this.form).then((response) => {
            this.$modal.msgSuccess("使用成功");
            this.getList();
          });
        }
      });
    },
    compareDate(val) {
      const d = this.datedifference(
        this.parseTime(new Date(), "{y}-{m}-{d}"),
        val
      );
      return d;
    },
    datedifference(sDate1, sDate2) {
      //sDate1和sDate2是2006-12-18格式
      let dateSpan, tempDate, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
  },
};
</script>
